<template>
  <div class="w-full h-full">
    <!-- <div v-if="stageIndex === 0" class="type-intro text-333">
      <span class="type">听后记录并转述（共2节；每节5分，共10分）</span>
      <p class="mt-10px">
        <span class="intro"
          >听短文，记录关键信息并转述短文内容，本大题共两节。第一节，听两遍短文，根据所听内容和提示将所缺的关键信息填写在相应位置上，每空只需填写一个词。第二节，听第三遍短文，根据所听内容和提示进行转述</span
        >
      </p>
    </div> -->
    <Stem :data="stem" />
  </div>
</template>

<script>
import Stem from '@/components/question/stem/index'
import { mapState } from 'vuex'
import { generateStudentAnswer, formatQuestionStem } from '@/utils/question'

export default {
  components: { Stem },
  inject: ['_addTagClickHandler', '_removeTagClickHandler', 'globalData'],
  props: {},
  data() {
    return {}
  },
  computed: {
    stageIndex() {
      const { stageIndex } = this.globalData.controller

      return stageIndex
    },
    ...mapState(['homework']),
    currentHomework() {
      return this.homework.currentHomework
    },
    currentQuestion() {
      const { questions, questionIndex } = this.currentHomework

      return questions[questionIndex]
    },
    stem() {
      const {
        stem,
        localStudentAnswer: { studentAnswer }
      } = this.currentQuestion

      const {
        info: { image = '', std = [] }
      } = stem

      let templateStd = ''
      try {
        std.forEach((s, index) => {
          const { xth } = s
          let fillAnswer = '点此填空'
          try {
            const answer = studentAnswer.anSqs[index].ans[0].anStudent
            answer && (fillAnswer = answer)
          } catch (error) {}
          templateStd += `<p>${xth}.<span class="fill" data-index="${index}">${fillAnswer}</span></p>`
        })
      } catch (error) {}
      return formatQuestionStem({
        html: `<div><span style="font-size:0.26rem;font-weight:500">听后记录信息</span><p><span>现在你有1分钟的时间浏览提示信息。</span></p><p><img src="${image}" /></p>${templateStd}</div>`,
        og: null,
        sqs: [],
        type: '英语听说-听后记录'
      })
    }
  },
  created() {
    this.$on('pause', () => {})
    this.$on('resume', () => {})
  },
  mounted() {
    this._addTagClickHandler('span', this.handleSpanClick)
  },
  beforeDestroy() {
    this._removeTagClickHandler('span', this.handleSpanClick)
  },
  methods: {
    init(stageIndex) {
      const {
        stem: {
          info: { audio = '' }
        }
      } = this.currentQuestion

      const stages = [
        {
          name: '播放题干',
          operateTips: '准备时间',
          duration:
            'https://snd-ai-assistant.oss-cn-shenzhen.aliyuncs.com/question/static/english/audio/bj_3_1_1.mp3'
        },
        {
          name: '播放对话第一遍',
          operateTips: '第一遍',
          duration: audio
        },
        {
          name: '播放对话第二遍',
          operateTips: '第二遍',
          duration: audio
        },
        {
          name: '填空输入',
          operateTips: '下面，请在90秒钟内将所缺信息填入到指定区域',
          duration:
            'https://snd-ai-assistant.oss-cn-shenzhen.aliyuncs.com/question/static/english/audio/bj_3_1_2.mp3'
        },
        {
          name: '开始填空输入',
          operateTips: '请填空输入',
          duration: 90 * 1000,
          ignoreSpeed: true
        }
      ]

      this.globalData.controller.reset()
      this.globalData.controller.init(stages, stageIndex)
    },
    handleSpanClick(node) {
      if (node.className.indexOf('fill') != -1) {
        const { index } = node.dataset
        const { localStudentAnswer } = this.currentQuestion
        const { studentAnswer } = localStudentAnswer

        this.$prompt('请输入答案', '提示', {
          inputValue: node.innerHTML && node.innerHTML != '点此填空' ? node.innerHTML : '',
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(({ value }) => {
            try {
              localStudentAnswer.studentAnswer = generateStudentAnswer({
                anSqs: studentAnswer.anSqs,
                anSqsIndex: index,
                ansIndex: 0,
                answer: value
              })
              this.currentQuestion.localStudentAnswerStatus = 1
              node.innerHTML = value ? value : '点此填空'
            } catch (error) {}
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .fill {
  display: inline-block;
  width: auto;
  height: 34px;
  background-color: #51c3ff;
  font-size: 18px;
  line-height: 34px;
  color: #fff;
  border-radius: 6px;
  margin-left: 4px;
  padding: 0 12px;
}
</style>
